<template>
	<view class="groupBuy">
		<!-- <view class="advImg">
			<swiper :current="1" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" previous-margin='8px' next-margin='8px' :style='"height:"+swHeight+"px"'>
				<swiper-item v-for='(item,index) in banner' :key='index'>
					<view class="swiper-item">
						<view class="advImgOne imgPublic">
							<image :src="item.img" mode="widthFix" @load='getHeight'></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="listTit dFlex jBetween_aCenter">
			<view class="titLeft dFlex jStart_aCenter">
				<view class="titIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/titIcon.png" mode="widthFix"></image>
				</view>
				<text>限时团购进行中</text>
			</view>
			<!-- <view class="screen dFlex jEnd_aCenter">
				<view class="screenOne active">最新</view>
				<view class="screenOne active">热门</view>
			</view> -->
		</view>
		<view class="list">
			<view class="activeOne" v-for='(item,index) in list' :key='index' @tap='lookDetail(item)'>
				<view class="tiaojian" v-if='item.pt_img'>
					<view class='ptImg imgPublic'>
						<image :src="item.pt_img" mode="widthFix"></image>
					</view>
					<view class="haveTime dFlex jStart_aCenter green" v-if="item.activity_status == '2' && item.is_limit == 1">
						<view class="toast dFlex jStart_aCenter">
							<view class="timeIcon imgPublic">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
							</view>
							<text>距开团仅剩</text>
						</view>
						<view class="surplus">
							<u-count-down :timestamp="calcTime(item.start_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
						</view>
					</view>
					<view class="haveTime dFlex jStart_aCenter orange" v-if="item.activity_status == '1' && item.is_limit == 1">
						<view class="toast dFlex jStart_aCenter">
							<view class="timeIcon imgPublic">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/timeIcon.png" mode="widthFix"></image>
							</view>
							<text>距结束仅剩</text>
						</view>
						<view class="surplus">
							<u-count-down :timestamp="calcTime(item.end_time)" bg-color='transparent' color='#ffffff' separator-color='#ffffff' :separator-size='28' :font-size='28'></u-count-down>
						</view>
					</view>
					<view class="status unStart" v-if="item.activity_status == '2'">未开始</view>
					<view class="status loading" v-if="item.activity_status == '1'">进行中</view>
					<view class="status end" v-if="item.activity_status == '3'">已结束</view>
				</view>
				<view class="activeContent">
					<view class="activeName">{{item.title}}</view>
					<view class="shops dFlex jAround_aStart">
						<view class="shopImg" v-for="(item2,index2) in item.goods_list" :key='index2' @tap.stop='lookShops(item2.goods_id,item)'>
							<view class="imgOne imgPublic">
								<image :src="item2.goods_main_img" mode="widthFix"></image>
								<view class='yjCount dFlex jAround_aCenter' v-if='user.auth_status == "2"'>
									<view class='showYJ'>佣</view>
									<text>{{(parseFloat(item2.goods_pt_price) * parseFloat(item2.service_rate) / 100).toFixed(2)}}</text>
								</view>
							</view>
							<view class="shopInfo">
								<view class="shopName">{{item2.goods_title}}</view>
								<view class="price">¥{{item2.goods_pt_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swHeight:'',
				user:{auth_status:'-1'},
				banner:[],
				
				list:[],
				page:1,
				load:false
			};
		},
		onLoad(e) {
			this.initConfig();
			if(e.shareId){
				uni.setStorageSync('shareInfo',{
					time:new Date().getTime(),
					id:'',
					shareId:e.shareId
				});
			}
			if(getApp().globalData.isLogin){
				this.initUser();
			}
		},
		onShareAppMessage() {
			return {
				title:'加一精选',
				path:'/active/groupBuy?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			let share = {
				title:'加一精选',
				path:'/active/groupBuy?shareId='+(uni.getStorageSync('uId')?uni.getStorageSync('uId'):''),
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initData();
			}
		},
		methods:{
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.user = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 查看商品详情
			lookShops(id,act){
				uni.navigateTo({
					url:'../seller/shopDetail?id='+id+'&actType=1&actId='+act.id,
				})
			},
			initConfig(){
				this.tool.getData('/api/mall/getPageSettingNew',{
					side:'c端',
					page:'活动页'
				}).then(res=>{
					if(res){
						res.setting.map((item,index)=>{
							if(item.area == "轮播图" && item.page == '活动页' && item.content){
								this.banner = JSON.parse(item.content).length?JSON.parse(item.content):[];
							}
						})
					}
					this.page = 1;
					this.initData();
				}).catch(err=>{
					console.log(err);
				})
			},
			getHeight(e){
				this.swHeight = uni.getSystemInfoSync().windowWidth * 0.95 / (e.detail.width / e.detail.height);
			},
			// 数据
			initData(){
				this.tool.getData('/api/pintuan/getPintuanList',{
					page:this.page,
					pageSize:'10',
					status:'1',
				}).then(res=>{
					if(res){
						res.map((item,index)=>{
							item.goods_list = item.goods_list.slice(0,3);
							if(item.is_limit == '1'){
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else if(item.start_time * 1000 <= new Date().getTime() && new Date().getTime() <= item.end_time * 1000){//进行中
									item.activity_status = '1';
								}else{//已结束
									item.activity_status = '3';
								}
							}else{
								if(item.start_time * 1000 > new Date().getTime()){//未开始
									item.activity_status = '2';
								}else{//进行中
									item.activity_status = '1';
								}
							}
						})
						this.list = this.page == 1?res:this.list.concat(res);
						this.load = res.length>=10?true:false;
					} 
				}).catch(err=>{
					console.log(err);
				})
			},
			// 团长、普通用户查看活动详情
			lookDetail(line){
				uni.navigateTo({
					// url:'../my/activeDetail?ptid='+line.id+'&mobile='+this.datas.mobile,
					url:'../my/activeDetail?ptid='+line.id,
				})
			},
			// 计算剩余时间
			calcTime(time){
				return (time * 1000 - new Date().getTime()) / 1000;
			},
		}
	}
</script>

<style lang="scss">
	.groupBuy{
		width: 100%;
		.advImg{
			width: 100%;
			background: #ffffff;
			padding: 10rpx 0 40rpx;
			.advImgOne{
				transform: scale(0.985);
				image{
					border-radius: 8px;
				}
			}
		}
		.list{
			width: 100%;
			padding: 0 30rpx;
			.activeOne{
				width: 100%;
				background: white;
				padding: 5px 8px 8px;
				box-sizing: border-box;
				margin-bottom: 10px;
				border-radius: 15px;
				.activeContent{
					width: 100%;
					padding:12px 0 0;
					.shops{
						width: 100%;
						.shopImg{
							width: 100px;
							.shopInfo{
								width: 100%;
								padding:8px 0;
								box-sizing: border-box;
								.price{
									font-weight: bold;
									font-size: 16px;
									color: #FB5D02;
									margin-top: 4px;
								}
								.shopName{
									width: 100%;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
								}
							}
							.imgOne{
								width: 100%;
								height:100px;
								border-radius: 4px;
								position: relative;
							}
						}
					}
					.activeName{
						width: 100%;
						font-size: 16px;
						font-weight: bold;
						margin-bottom: 12px;
					}
				}
				.tiaojian{
					width: 100%;
					padding:12px 0 0;
					position:relative;
					.ptImg{
						image{
							border-radius: 8px;
						}
					}
					.condition{
						flex: 1;
						font-size: 13px;
						color:#999999;
						.have{
							color: #FDA100;
							margin-left: 10px;
						}
					}
					.status{
						width: max-content;
						line-height: 20px;
						border-radius: 40px;
						padding: 0 6px;
						font-size: 12px;
						position:absolute;
						top:20px;
						right:12px;
					}
					.unStart{
						color: white;
						background: #0ACC4C;
					}
					.loading{
						color: white;
						background: #FB5D02;
					}
					.end{
						color: #999999;
						background: #E9E9E9;
					}
				}
				.haveTime{
					width: max-content;
					border-radius: 40px;
					color: white;
					position:absolute;
					top:20px;
					left:35%;
					transform:translateX(-50%);
					.surplus{
						padding: 0 4px;
					}
					.toast{
						width: max-content;
						border-radius: 40px;
						padding:2px 6px;
						.timeIcon{
							width: 16px;
							margin-right: 4px;
						}
					}
				}
				.green{
					background:rgb(10,204,76);
					.toast{
						background: #0ACC4C;
					}
				}
				.orange{
					background:rgb(251,93,2);
					.toast{
						background: #FB5D02;
					}
				}
			}
		}
		.listTit{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: 30rpx 0 15rpx;
			.titLeft{
				flex: 1;
				color: #282828;
				font-weight: bold;
				font-size: 18px;
				.titIcon{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
			.screen{
				width: max-content;
				.screenOne{
					margin-left:  30rpx;
				}
				.active{
					color: #FF5000;
				}
			}
		}
	}
</style>
